<template>
    <div class="allbuju">
        <div id="top">
            <div class="back" @click="baojieshouye">
               <i class="fa-solid fa-arrow-left-long"></i>
            </div>
                
            <p>育儿看护</p>
        </div>
        <div class="jieshao">
            <p>价格参考</p>
            <img src="@/assets/price.jpg">
        
        <table class="main-content">
            <tbody>
                <tr>
                    <td rowspan="6" onclick="tozixun( )">
                    育婴师
                    <sub> (26天) </sub>
                    </td>
                </tr>
                <tr>
                    <td rowspan="1" onclick="toZixun()">五星级育婴师</td>
                    <td onclick="toZixun( )">9500-10508元/月</td></tr>
                <tr>
                    <td rowspan="1" onclick="toZixun()">四星级育婴师</td>
                    <td onclick="tozixun()">8508-9508元/月</td>
                </tr>
                <tr>
                    <td rowspan="1" onclick="toZixun()">三星级育婴师</td>
                    <td onclick="toZixun()">7508-8500元/月</td>
                </tr>
                <tr> 
                    <td rowspan="1" onclick="toZixun()">二星级育婴师</td>
                    <td onclick="tozixun()">6508-7508元/月</td>
                </tr>
                <tr>
                    <td rowspan="1" onclick="tozixun()">一星级育婴师</td>
                    <td onclick="tozixun()">5588-6508元/月</td>
                </tr>
            </tbody>
        </table>
        </div>
         <div id="yuyue">立即预约</div>
    </div>
</template>

<script>

export default {
  name: 'nammy',
  data(){
      return{

      }
  },
   methods:{
      baojieshouye(){
          this.$router.replace('/baomubaojie')
      }
   }
}
</script>
<style scoped>
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
.main-content {
    border-collapse: separate;
    text-align: center;
    vertical-align: middle;
    width: 100%;
      margin-top: 20px;
}
table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border-color: grey;
  
}
.main-content tr td {
    background-color: #F0F0F0;
    padding: 9px 0;
}
#top{
    display: flex;
    background-color: coral;
}
#top i{
    margin: 10px 0 0 10px;
    font-size: 2rem;
    color: rgb(255, 255, 255);
}
#top p{
    position: relative;
    font-weight: lighter;
    color: aliceblue;
  left:120px;
}
.jieshao{
    width: 340px;
    height: 500px;
    margin: auto;
}
.jieshao img{
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}
#yuyue{
    height: 50px;
    background-color: coral;
    position: relative;
    /* font-weight: lighter;
    color: aliceblue; */
  top:225px;
  color: aliceblue;
  text-align: center;
  font-size: 25px;
}
</style>